<template>
    <el-drawer
            ref="drawer"
            :title="title"
            :visible.sync="dialogVisible"
            direction="rtl"
            size="700px"
            :before-close="handleClose">
        <el-scrollbar>
            <div class="save_info_container">
                <div class="save_info_form">
                    <el-form ref="save" size="small" :inline="false" :model="editForm" :rules="rules">
                        <el-form-item label="菜单类型" :label-width="formLabelWidth">
                            <el-radio-group v-model="type">
                                <el-radio :label="0">一级菜单</el-radio>
                                <el-radio :label="1">子菜单</el-radio>
                                <el-radio :label="2">按钮/权限</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item  prop="menuName" :label="type===2?'按钮/权限':'菜单名称'" :label-width="formLabelWidth">
                            <el-input  v-model.trim="editForm.menuName" :placeholder="type===2?'请输入按钮/权限':'请输入菜单名称'"></el-input>
                        </el-form-item>

                        <el-form-item  v-if="type!==0" prop="parentId"  label="上级菜单" :label-width="formLabelWidth">
                            <el-cascader
                                    v-model="editForm.parentId"
                                    :props="config"
                                    :options="menuList"></el-cascader>
                        </el-form-item>
                        <el-form-item  v-if="type!==2" prop="routerUrl" label="路由地址" :label-width="formLabelWidth">
                            <el-input  v-model.trim="editForm.routerUrl" placeholder="请输入路由地址"></el-input>
                        </el-form-item>
                        <el-form-item  v-if="type!==2" prop="componentName" label="组件" :label-width="formLabelWidth">
                            <el-input  v-model.trim="editForm.componentName" placeholder="请输入组件"></el-input>
                        </el-form-item>
                        <el-form-item   v-if="type===0" prop="menuIcon" label="菜单图标" :label-width="formLabelWidth">
                            <el-input  v-model.trim="editForm.menuIcon" placeholder="请输入菜单图标"></el-input>
                        </el-form-item>
                        <el-form-item   prop="permsCode" label="权限标识" :label-width="formLabelWidth">
                            <el-input  v-model.trim="editForm.permsCode" placeholder="菜单组件:权限code 例如 user:add"></el-input>
                        </el-form-item>
                        <el-form-item label="排序" :label-width="formLabelWidth">
                            <el-input  v-model.trim="editForm.priority" placeholder="请输入排序"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="save_info_form_ctr">
                    <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
                    <el-button type="primary" size="mini" @click="save" :loading="isloading">确 定</el-button>
                </div>
            </div>
        </el-scrollbar>
    </el-drawer>
</template>

<script>
    import saveMixins from '../../../../common/mixins/saveMixins'
    import {save,selectMenuList} from "../../../../api/base/menu";
    import validate from './validate'
    export default {
        name: "save",
        mixins:[saveMixins],
        data(){
            return{
                formLabelWidth:'100px',
                type:0,
                module:"目录",
                menuList:[],
                config:{
                    emitPath:false ,
                    value:"id",
                    label:"menuName",
                    checkStrictly: true
                },
                rules:validate
            }
        },
        created(){
            selectMenuList().then(res=>{
                if(res.status===0){
                    this.menuList=res.data;
                }else {
                    this.$message.error(res.mag)
                }
            })
        },
        methods:{
            setDataBack(data){
               if(!(data&&data.id)){
                   this.type=0;
               }else {
                   this.type=data.type;
               }

            },
            commit(data){
                if(data.parentId===data.id){
                    this.$message.error("上级菜单不能是当前菜单");
                    return;
                }
                data.type=this.type;
                return save(data);
            },
            handleClose(done){
                done();
            },
            addChild(data){
                this.editForm={};
                this.type=1;
                this.editForm.parentId=data.id;
                this.dialogVisible=true;
            }
        }
    }
</script>

<style scoped lang="sass">
 @import "../../../../styles/save"
</style>
